<template>
  <div class="projectDetailModal-body" v-if="visible">
    <div class="modal-header">
      <div class="left-icon"></div>
      <div class="name">{{ sysProject.proName }}</div>
      <div class="close-button" @click="_handleClose()"></div>
    </div>
    <div class="modal-body">
      <div class="project-img">
        <img :src="proImgSrc" alt="" />
      </div>
      <div class="project-desc-warp">
        <!-- 项目经理 -->
        <div class="project-desc-item">
          <div class="label">项目负责人</div>
          <div class="value">{{ sysProject.contacts || "--" }}</div>
        </div>
        <!-- 项目状态 -->
        <div class="project-desc-item">
          <div class="label">项目状态</div>
          <div class="value">{{ sysProject.proStatusDesc || "--" }}</div>
        </div>
        <!-- 投资金额(万元) -->
        <div class="project-desc-item">
          <div class="label">投资金额</div>
          <div class="value">{{ sysProject.roadMoney || "--" }}万元</div>
        </div>
        <!-- 投资规模 -->
        <div class="project-desc-item">
          <div class="label">投资规模</div>
          <div class="value">{{ sysProject.raodMoneyScale || "--" }}</div>
        </div>
        <!-- 建设周期 -->
        <div class="project-desc-item">
          <div class="label">建设周期</div>
          <div class="value">
            {{ sysProject.startDate }}~{{ sysProject.endDate }}
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <div class="button" @click="gotoProject()">进入项目</div>
    </div>
  </div>
</template>
<script>
//项目详情弹窗
import { axios } from "@/utils/request";
export default {
  name: "ProjectDetailModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    source: {
      type: Object,
      default: () => {},
    },
    ancUUID: {
      type: String,
      default: "",
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        } else {
          this.sysProject = {};
          this.proImgSrc = "";
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      sysProject: {},
      proImgSrc: "",
    };
  },
  mounted() {},
  methods: {
    getData() {
      return new Promise((resolve, reject) => {
        this.loading = true;
        axios
          .post(
            `/mdata/organization/getDetailByOrgCode?orgCode=${this.ancUUID}`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.sysProject = data?.sysProject ?? {};
            this.getProImage();
          })
          .catch((_) => {
            this.sysProject = {};
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    gotoProject(item = {}) {
      localStorage.setItem(
        "CURRENT_PROJECT_DATA",
        JSON.stringify(this.sysProject)
      );
      this.$router
        .push({
          path: "/project/baseInfo/index",
          query: {
            type: "login",
          },
        })
        .catch(() => {
          console.log("登录跳转首页出错,这个错误从哪里来的");
        });
    },

    getProImage() {
      let { sysProject } = this;
      if (sysProject.proImage) {
        let data = JSON.parse(sysProject.proImage);
        try {
          this.proImgSrc = data?.[0].url ?? "";
        } catch (error) {}
      }
    },
    _handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
.projectDetailModal-body {
  height: 633px;
  width: 492px;
  display: flex;
  flex-direction: column;
  background: rgba(1, 30, 38, 0.7);
  border: 1px solid rgba(142, 227, 251, 0.3);
  border-top: none;
  box-sizing: border-box;
  border-radius: 0 10px 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  //自定义滚动条
  .custom-scrollbar {
    overflow: auto !important;
    overflow-x: hidden !important;
    overflow-y: overlay !important;
    //滚动条整体样式
    &::-webkit-scrollbar {
      width: 6px;
      height: 10px;
    }

    //滚动条里面小方块
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 144, 255, 0.6);
    }

    //滚动条里面轨道
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background: rgba(0, 144, 255, 0.1);
    }
    //边角，即两个滚动条的交汇处
    &::-webkit-scrollbar-corner {
      background: none;
    }
  }
  .modal-header {
    height: 36px;
    flex-shrink: 0;
    background: yellow;
    background: linear-gradient(
      90deg,
      rgba(0, 167, 216, 0.7),
      rgba(0, 77, 99, 0)
    );
    position: relative;
    &::before {
      content: "";
      display: flex;
      width: 300px;
      height: 40px;
      background: url("~@/assets/img/portalEntry/modal_icon_1.png");
      position: absolute;
      left: 0;
      top: 0;
      background-size: 100% 100%;
    }
    &::after {
      content: "";
      display: flex;
      width: 75px;
      height: 36px;
      background: url("~@/assets/img/portalEntry/modal_icon_2.png");
      position: absolute;
      right: 0;
      top: 0;
      background-size: 100% 100%;
    }
    .left-icon {
      position: absolute;
      width: 21px;
      height: 36px;
      background: url("~@/assets/img/portalEntry/modal_icon_3.png");
      position: absolute;
      left: 0;
      top: 0;
      background-size: 100% 100%;
    }
    .close-button {
      position: absolute;
      width: 12px;
      height: 12px;
      background: url("~@/assets/img/portalEntry/modal_icon_4.png");
      position: absolute;
      right: 12px;
      top: 12px;
      background-size: 100% 100%;
      cursor: pointer;
      z-index: 9;
      &:hover {
        opacity: 0.5;
      }
    }
    .name {
      color: #fff;
      font-size: 18px;
      letter-spacing: 2px;
      position: relative;
      z-index: 9;
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: 16px;
    }
  }
  .modal-body {
    flex: 1;
    box-sizing: border-box;
    padding: 20px 0 0 0;
    .custom-scrollbar();
    overflow-x: hidden !important;
    display: flex;
    flex-direction: column;
    .project-img {
      height: 258px;
      background: rgba(0, 197, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 4px;
      flex-shrink: 0;
      margin: 0 20px 20px 20px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .project-desc-warp {
      flex: 1;
      box-sizing: border-box;
      padding: 0 36px;
      .custom-scrollbar();
      .project-desc-item {
        display: flex;
        color: #b8e8ff;
        font-size: 16px;
        letter-spacing: 2px;
        &::before {
          display: flex;
          content: "";
          width: 18px;
          height: 18px;
          background: red;
          margin-right: 12px;
          flex-shrink: 0;
          margin-top: 4px;
        }
        &:not(:last-child) {
          margin-bottom: 16px;
        }
        &:nth-child(1) {
          &::before {
            background: url("~@/assets/img/portalEntry/modal_icon_12.png");
            background-size: 100% 100%;
          }
        }
        &:nth-child(2) {
          &::before {
            background: url("~@/assets/img/portalEntry/modal_icon_13.png");
            background-size: 100% 100%;
          }
        }
        &:nth-child(3) {
          &::before {
            background: url("~@/assets/img/portalEntry/modal_icon_14.png");
            background-size: 100% 100%;
          }
        }
        &:nth-child(4) {
          &::before {
            background: url("~@/assets/img/portalEntry/modal_icon_15.png");
            background-size: 100% 100%;
          }
        }
        &:nth-child(5) {
          &::before {
            background: url("~@/assets/img/portalEntry/modal_icon_16.png");
            background-size: 100% 100%;
          }
        }
        &:nth-child(6) {
          &::before {
            background: url("~@/assets/img/portalEntry/modal_icon_17.png");
            background-size: 100% 100%;
          }
        }
        .label {
          width: 90px;
          flex-shrink: 0;
        }
        .value {
          color: #00ffff;
          padding-left: 16px;
        }
      }
    }
    &::before {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      bottom: 0px;
      left: 0px;
      background: url("~@/assets/img/portalEntry/modal_icon_5.png");
      background-size: 100% 100%;
    }
    &::after {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      bottom: 0px;
      right: 0px;
      background: url("~@/assets/img/portalEntry/modal_icon_6.png");
      background-size: 100% 100%;
    }
  }
  .modal-footer {
    flex-shrink: 0;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    .button {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      width: 130px;
      height: 36px;
      font-size: 16px;
      color: #fff;
      background: url("~@/assets/img/portalEntry/modal_icon_7.png");
      background-size: 100% 100%;
    }
  }
}
</style>
